<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<meta charset="UTF-8" >
  <title>Gang of Seven: Login</title>
  <style>
    .jello-wrapper {
      margin: 0 auto;
      padding: 0 30px 8px 30px;
      box-sizing: content-box;
      min-width: 500px;
      height: calc( 100vh - 25px );
      min-height: 660px;
    }
    .jello {
      position: relative;
      height: calc( 100% - 10px );
      box-shadow: 1px 1px 5px 0 grey;
      border: 1px solid grey;
      /*background-color: gold;*/
    }
    .header, .footer {
      box-sizing: border-box;
      background-color: #383838;
      color: #FEFEFE;
      padding-left: 16px;
      padding-right: 16px;
      overflow-y: hidden;
    }
    .header {
      height: 200px;
    }
    .footer {
      height: 150px;
      text-align: right;
    }
    .content {
      position: relative;
      box-sizing: border-box;
      height: calc( 100% - 350px );
      color: #080808;
      padding: 16px;
      overflow-y: auto;
    }
    h1 {
      font-size: 24px;
      line-height: 1.5em;
    }
    h2 {
      font-size: 18px;
      line-height: 1.5em;
    }
    .calligraphy {
      font-style: italic;
      font-size: smaller;
      color: #fdf7a3;
    }
    .button-stack {
      margin-top: 0;
      margin-bottom: 16px;
    }
    .action-button {
      width: 200px;
      height: 30px;
      background-color: #4680fd;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    .action-button:hover {
      background-color: #5e96ff;
      box-shadow: 1px 1px 2px 0 #7faefd;
    }
    .action-button:active {
      background-color: #4176eb;
    }

    .button-group {
      width: 52%;
      box-sizing: border-box;
      min-width: 220px;
      float: right;
    }
    .diagram {
      width: 40%;
      height: calc( 100% - 30px );
    }
    .diagram img {
      max-width: 100%;
      max-height: 100%;
      border: 8px solid white;
      box-shadow: 3px 3px 5px 0 darkgrey;
    }
  </style>
</head>
<body>
  <div class="jello-wrapper">
    <div class="jello">
      <div class="header">
        <h1>Welcome to my (demo) <br/><span class="calligraphy">Gang of Seven</span> website!</h1>
        <h3>This page simulates the CAS login portal. Click the button below to simulate a success
        login, and then user is redirected to the front-end services.</h3>
      </div>
      <div class="content">
        <div class="button-group">
          <form id="loginPanel" action="login" method="post">
            <input id="userId" name="id" type="hidden"/>
            <p class="button-stack" th:each="person : ${people}">
              <button class="action-button" th:attr="data-person-id=${person.id}"
                      onclick="handleLogin(this)">Login as: <span th:text="${person.name}"></span></button>
            </p>
          </form>
        </div>

        <div class="diagram">
          <img src="/static/demo-contact.png" alt="demo-contact-diagram"/>
        </div>
      </div>
      <div class="footer">
        <h2>Good design comes from diligent practice!</h2>
      </div>
    </div>
  </div>
  <script>
    function handleLogin(button) {
        var userId = button.dataset.personId;
        document.getElementById("userId").value=userId;
        var loginPanel = document.getElementById("loginPanel");
        loginPanel.submit();
    }
  </script>
</body>
</html>